<template>
  <div class="info">
    <van-nav-bar title="设备详情" left-arrow @click-left="onClickLeft" />
    <div class="info-top">
      <div class="info-top-left">
        <img class="info-top-left-avtor" :src="avtorData" alt="" />
        <div class="info-top-left-detail">
          <div class="info-top-left-detail-text">
            由{{ this.deviceInfo.username }}创建
          </div>
          <van-button v-if="!shareView" round type="info" disabled size="mini">已关注</van-button>
        </div>
      </div>
      <div class="info-top-right">
        <div class="info-top-right-dname">
          {{ this.deviceInfo.devicename }}
        </div>
        <div class="info-top-right-dscribe">
          {{ this.deviceInfo.scribe }}
        </div>
      </div>
    </div>
    <div class="info-content">
      <van-cell
        class="info-content-cell"
        title="评论"
        size="large"
        is-link
        @click="toPage('interface_page_comment')"
      />
      <van-cell v-if="shareView" class="info-content-cell" center size="large" title="共享">
        <template #right-icon>
          <van-switch
            v-model="share"
            size="24px"
            :loading="sBtnLoad"
            @change="onChange()"
          />
        </template>
      </van-cell>
      <van-cell
        class="info-content-cell"
        title="局域网摄像头设置"
        size="large"
        is-link
        @click="toPage('interface_page_settings')"
      />
    </div>
  </div>
</template>

<script>
import mqtt from "mqtt";
import { editDevice } from "@api/api.js";
import { Toast } from 'vant';
var client;
const options = {
  connectTimeout: 40000,
  clean: true,
};
client = mqtt.connect("ws://121.5.58.100:8083/mqtt", options);

export default {
  name: "interface_page_info",
  components: {},
  mounted: function () {
    this.avtorData =
      "http://121.5.58.100/avatar/" +
      this.$route.params.deviceInfo.createUserID +
      "_avatar.jpg?tempid=" +
      Math.random();
    console.log(this.avtorData);
    this.initInterface();
  },
  activated: function () {
    console.log(this.deviceInfo);
  },
  data: function () {
    return {
      shareView:false,
      camera: {
        cameraIP: "",
        cameraState: false,
      },
      sBtnLoad: false,
      deviceInfo: "",
      share: false,
      avtorData: "",
      show: false,
      stepShow: false,
    };
  },
  methods: {
    onChange() {
      this.sBtnLoad = true;
      this.deviceInfo.share=Number(!this.deviceInfo.share)

      editDevice({
        id:this.deviceInfo.id,
        name:this.deviceInfo.devicename,
        share:this.deviceInfo.share,
        scribe:this.deviceInfo.scribe,
        type:this.deviceInfo.type
      }
        
      ).then((res) => {
        this.sBtnLoad=false
        if(res.returncode==200){
          Toast("设置成功")
          this.share =Boolean(this.deviceInfo.share)
        }
        else{
          Toast("设置失败")
        }
        
        
      });
    },
    initInterface() {
      this.paramsRes = this.$route.params;
      this.deviceInfo = this.paramsRes.deviceInfo;
      if(this.deviceInfo.createUserID===Number(localStorage.getItem("setUserID"))){
        this.share = Boolean(this.deviceInfo.share)
        this.shareView=true
      }
      else{
        this.shareView=false
      }
      this.camera = JSON.parse(localStorage.getItem(this.deviceInfo.id));
      console.log(this.deviceInfo);
    },
    onConfirm(cdata) {
      this.cdata = cdata;
      localStorage.setItem("cdata", this.cdata);
      this.show = false;
    },
    toPage(page) {
      this.$router.push({
        name: page,
        params: {
          deviceInfo: this.paramsRes.deviceInfo,
          routerType: "push",
        },
      });
    },
    onClickLeft() {
      //this.$route.params.user = "123";
      localStorage.setItem(this.$route.params.id, JSON.stringify(this.camera));
      this.$router.back();

      //console.log(localStorage.getItem(this.$route.params.id))

      // this.$router.push({
      //   name: "interface_page_index",
      //   params: {
      //     id: this.$route.params.id,
      //     name: this.$route.params.name,
      //     pub: this.$route.params.pub,
      //     sub: this.$route.params.sub,
      //     resData: this.$route.params.resData,
      //     cData: this.$route.params.cData,
      //     routerType: "back",
      //   },
      // });
    },
    onSetHeight() {
      localStorage.setItem("Height", this.Height);
      //console.log(this.deviceData.set - (this.deviceData.set*2/21))
    },
    onSetWeight() {
      localStorage.setItem("Weight", this.Weight);
      //console.log(this.deviceData.set - (this.deviceData.set*2/21))
    },
  },
};
</script>

<style lang="scss" scoped>
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateX(100px);
}

.v-enter-active,
.v-leave-to {
  transition: all 0.6s ease;
}

/* v-move 和 v-leave-to 配合使用，能够实现列表后续的元素，逐渐飘上来的效果 */
.v-move {
  transition: all 0.6s ease;
}

.v-leave-to {
  position: absolute;
}
.info {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-flow: column;
  &-top {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    display: flex;
    flex-direction: row;

    &-left {
      flex: 1;
      margin: 20px 10px 20px 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      &-avtor {
        margin-right: 10px;
        width: 3rem;
        height: 3rem;
        border-radius: 3.5rem;
        border: solid #fff 2px;
      }
      &-detail {
        width: auto;
        // text-align: center;
        &-text {
          word-break: break-all;
          font-size: 1rem;
          font-weight: 700;
          margin-bottom: 5px;
        }
      }
    }
    &-right {
      flex: 1;
      margin: 20px 10px 20px 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      &-dname {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 5px;
      }
      &-dscribe {
        font-size: 0.8rem;
        color: gray;
      }
    }
  }
  &-content {
    height: 100%;
    margin: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: left;
    transition: 0.3s;
    overflow: auto;
    &-cell {
      margin: 0 0 10px 0;
      width: auto;
      border-radius: 10px;
      background-color: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(20px) saturate(180%);
    }
    &-control {
      border-radius: 20px;
      margin-top: 0px;
      margin-left: 20px;
      margin-right: 20px;
      margin-bottom: 60px;
    }
    &-area {
      &-text {
        margin-left: 20px;
        font-size: 5vw;
        color: white;
        font-weight: 900;
      }
    }
    &-text {
      margin: px2rem(20);
      font-size: px2rem(30);
      color: white;
      font-weight: 600;
      margin-bottom: px2rem(30);
    }
    &-shebei {
      margin-left: px2rem(20);
      margin-bottom: px2rem(5);
      font-size: px2rem(14);
      color: white;
      font-weight: 400;
    }
    &-info {
      transition: 0.5s;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 16px 15px;
      &-item {
        transition: 0.5s;
        margin: 5px;
        text-align: center;
        padding: 5px;
        border-radius: 20px 20px 20px 20px;
        // box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3);
        width: calc(50% - 20px);
        height: calc(50% - 10px);
        display: flex;
        position: relative;
        flex-direction: column;
        justify-content: left;
        background-color: rgba(255, 255, 255, 0.9);
        background-attachment: fixed;
        &-title {
          display: flex;
          flex-direction: row;
          align-items: center;

          &-name {
            margin: auto;
            transition: 0.5s;
            text-align: left;
            color: black;
            //margin-top: 0;
            font-size: 4vw;
          }
        }

        &-data {
          transition: 0.5s;
          // text-align: right;
          color: black;
          margin: auto;
          font-size: 10vw;
          font-weight: 500;
        }
      }
    }
  }
}
.custom-button {
  width: auto;
  padding: 5px 10px;
  color: #fff;
  font-size: 4vw;
  line-height: 5vw;
  text-align: center;
  background-color: #0aadee;
  border-radius: 20px;
}
.backgroundcss {
  margin: 0 0 10px 0;
  width: auto;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
}
</style>
